<template>
  <div class="home">
    <el-row>
      <el-col :span="8">
        <el-card>
          <h1>待审社团</h1>
          <el-card class="auditCLub">
            <h3>20</h3>
            <el-link :underline="false">待审批社团数量</el-link>
          </el-card>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h1>待审活动</h1>
          <el-card class="auditAct">
            <h3>30</h3>
            <el-link :underline="false">待审批活动数量</el-link>
          </el-card>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h1>系统公告</h1>
          <el-table :data="pubData" style="width: 100% margin-bottom: 20px" height="300" row-key="id" border
            default-expand-all>
            <el-table-column show-overflow-tooltip="true" prop="pubMessage" label="通知内容" sortable width="350" />
            <el-table-column prop="createTime" label="发布时间" sortable />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-card>
          <h1>新增用户统计</h1>
          <Broker />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h1>用户性别统计</h1>
          <Pie />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h1>操作日志统计</h1>
          <el-table :data="tableData" style="width: 100% margin-bottom: 20px" height="300" row-key="id" border
            default-expand-all>
            <el-table-column prop="userName" label="用户" sortable width="80" />
            <el-table-column show-overflow-tooltip="true" prop="operaMsg" label="操作详情" sortable width="120" />
            <el-table-column prop="operaTime" label="操作时间" sortable />
            <el-table-column prop="loginTime" label="最后登录时间" sortable />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<script setup>
import { ref } from 'vue';
import Pie from './echarts/pie.vue'
import request from '@/utils/request';
import { ElMessage } from 'element-plus'
import Broker from './echarts/broken.vue'

const pubData = ref([])

const tableData = ref([])


const initPubData = async () => {
  const res = await request.get('/system/getPubData');
  if (res.data.code === 200) {
    pubData.value = res.data.data;
  } else {
    new ElMessage(res.data.msg);
  }
}
initPubData();
const initTableData = async () => {
  const res = await request.get('/system/getOperationData');
  if (res.data.code === 200) {
    tableData.value = res.data.data;
  } else {
    new ElMessage(res.data.msg);
  }

}
initTableData();
</script>

<style lang="scss" scoped>
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}

h1 {
  font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
  text-align: center;
  color: dodgerblue;
}

.el-card {
  margin-left: 20px;
  width: 550px;
  height: 350px;
  // float: left;
}

.el-link {
  width: 100%;
  font-size: large;
  color: #ffffff;
  text-align: center;
}

h3 {
  margin-top: 100px;
  font-size: x-large;
  color: #ffffff;
  text-align: center;
}

.auditCLub {
  margin-left: 5%;
  margin-top: 20px;
  width: 90%;
  height: 280px;
  background-color: #f9cb98;
}

.auditAct {
  margin-left: 5%;
  margin-top: 20px;
  width: 90%;
  height: 280px;
  background-color: #61d2bb;
}

.split {
  height: 30px;
}
</style>
